<template>
	<div>
		<a-modal width="500px" v-model="openVisible" :title="openTitle">
			<a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{span: 4}" :wrapper-col="{span: 18}">
		<#list formFields as po>
			<#if po.componentType == 'textarea'>
				<a-form-model-item label="${po.description}" prop="${po.propertyName}">
					<a-textarea v-model="form.${po.propertyName}"<#if (po.fieldLength > 0)> :maxLength="${po.fieldLength?c}"</#if>></a-textarea>
				</a-form-model-item>
			<#elseif po.componentType == 'password'>
				<a-form-model-item label="${po.description}" prop="${po.propertyName}">
					<a-input-password v-model="form.${po.propertyName}"<#if (po.fieldLength > 0)> :maxLength="${po.fieldLength?c}"</#if>></a-input-password>
				</a-form-model-item>
			<#elseif po.componentType == 'date' && po.propertyType == 'Date'>
				<a-form-model-item label="${po.description}" prop="${po.propertyName}">
					<a-date-picker placeholder="选择日期" v-model="form.${po.propertyName}"
									format="yyyy-MM-dd" valueFormat="yyyy-MM-dd HH:mm" style="width: 100%;"></a-date-picker>
				</a-form-model-item>
			<#elseif po.componentType == 'date' && po.propertyType == 'String'>
				<a-form-model-item label="${po.description}" prop="${po.propertyName}">
					<a-date-picker placeholder="选择日期" v-model="form.${po.propertyName}"
									format="yyyy-MM-dd" valueFormat="yyyy-MM-dd" style="width: 100%;"></a-date-picker>
				</a-form-model-item>
			<#elseif po.componentType == 'radio'>
				<a-form-model-item label="${po.description}" prop="${po.propertyName}">
					<a-radio-group v-model="form.${po.propertyName}">
						<a-radio v-for="item in ${po.propertyName}List" :key="item.id" :value="item.id">{{item.name}}</a-radio>
					</a-radio-group>
				</a-form-model-item>
			<#elseif po.componentType == 'checkbox'>
				<a-form-model-item label="${po.description}" prop="${po.propertyName}">
					<a-checkbox-group v-model="form.${po.propertyName}s">
						<a-checkbox v-for="item in ${po.propertyName}List" :key="item.id" :value="item.id">{{item.name}}</a-checkbox>
					</a-checkbox-group>
				</a-form-model-item>
			<#elseif po.componentType == 'select'>
				<a-form-model-item label="${po.description}" prop="${po.propertyName}">
					<a-select v-model="form.${po.propertyName}" placeholder="请选择">
						<a-select-option v-for="item in ${po.propertyName}List" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
					</a-select>
				</a-form-model-item>
			<#else>
				<a-form-model-item label="${po.description}" prop="${po.propertyName}">
					<a-input v-model="form.${po.propertyName}"<#if (po.fieldLength > 0)> :maxLength="${po.fieldLength?c}"</#if>></a-input>
				</a-form-model-item>
			</#if>
		</#list>
			</a-form-model>
			<template slot="footer">
				<a-button @click="openVisible = false"> 取消 </a-button>
				<a-button type="primary" @click="handleSave"> 保存 </a-button>
			</template>
		</a-modal>
	</div>
</template>
<script>
	import { get${entityName}ById, add${entityName}, update${entityName} } from '@/api/${moduleName}/${entityName?uncap_first}.js'
	export default {
		name: '${entityName?uncap_first}Vue',
		data() {
			return {
			<#list formFields as po>
				<#if po.componentType == 'radio' || po.componentType == 'checkbox' || po.componentType == 'select'>
				${po.propertyName}List: [
					{id:"1",name:"选项1"},
					{id:"2",name:"选项2"},
					{id:"3",name:"选项3"}
				],
				</#if>
			</#list>
				openVisible: false,
				openTitle: '',
				form: {
				<#list formFields as po>
					${po.propertyName}: undefined<#if po_has_next>,</#if>
				</#list>
				},
				rules: {
			<#list formFields as po>
				<#if po.formValidType??>
					<#if po.formValidType == 'required'>
					${po.propertyName}<#if po.componentType == 'checkbox'>s</#if>: [{ required: true, message: "请输入${po.description}" }]<#if po_has_next>,</#if>
					<#elseif po.formValidType == 'email'>
					${po.propertyName}<#if po.componentType == 'checkbox'>s</#if>: [ { type: "email", message: "请输入正确的邮箱" }]<#if po_has_next>,</#if>
					</#if>
				</#if>
			</#list>
				},
			}
		},
		methods: {
			open(id) {
				if(id) {
					this.openTitle = '编辑${description}'
					get${entityName}ById(id).then(res => {
						if (res.code == 200) {
							this.form = res.data
							this.openVisible = true
							this.$refs.ruleForm.resetFields();
						}
					})
				} else {
					this.openTitle = '新增${description}'
					this.openVisible = true
					this.$nextTick(()=>{
						this.form = {
							<#list formFields as po>
							${po.propertyName}: undefined<#if po_has_next>,</#if>
							</#list>
						}
						this.$refs.ruleForm.resetFields();
					})
				}
			},
			handleSave() {
				this.$refs.ruleForm.validate(valid => {
					if (valid) {
						if (this.form.id) {
							update${entityName}(this.form).then(res => {
								this.openVisible = false
								this.$emit('refresh')
								if (res.code == 200) {
									this.$message.success('修改成功！')
								} else {
									this.$message.error('修改失败！')
								}
							})
						} else {
							add${entityName}(this.form).then(res => {
								this.openVisible = false
								this.$emit('refresh')
								if (res.code == 200) {
									this.$message.success('新增成功！')
								} else {
									this.$message.error('新增失败！')
								}
							})
						}
					}
				})
			}
		}
	}
</script>
<style scoped lang="less">

</style>
